<!DOCTYPE html> 
<html>

<head>
  <title></title>
  
  
  
  <?php
      include_once('head.php'); 
   ?> 
  
  <!-- <script type="application/javascript" src="iscroll4/src/iscroll.js"></script> -->
  
  <link href="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" /> 
  
  <style>
  .block {
  padding: 0px;
  width: 50%;
  }
  #container {
  width: inherit !important;
  margin: 100%;
  }
  </style>
 
 <!--  for blocksit : pinterest effect -->
  
  <link rel='stylesheet' href="blocksit/style-custom.css" media='screen' />
  
  
  
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->

<script src="blocksit/blocksit.min.js"></script>
  
  
  
  
  <!-- css per il footer -->
  <style>
      .nav-glyphish-example .ui-btn .ui-btn-inner { height:25px; padding-top: 10px !important; }
      .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; /*height: 25px!important;*/ margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
      #home .ui-icon { background:  url(images/glyphish-icons-png/53-house.png) 50% 50% no-repeat; background-size: 18px 18px; }
      #search .ui-icon { background:  url(images/glyphish-icons-png/06-magnify.png) 50% 50% no-repeat; background-size: 18px 16px;  }
      #gift .ui-icon { background:  url(images/glyphish-icons-png/24-gift.png) 50% 50% no-repeat;  background-size: 14px 20px; }
      #wishlist .ui-icon { background:  url(images/glyphish-icons-png/28-star.png) 50% 50% no-repeat;  background-size: 22px 22px; }
   </style>
  
  
  <script type="application/javascript" src="jquery-mobile-iscrollview-master/demo/build/javascripts/iscroll.js"></script>
  <script type="application/javascript" src="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview.js"></script>
  <!-- <script type="application/javascript" src="jquery-mobile-iscrollview-master/demo/build/javascripts/pull-example.js"></script> -->
  
  
  
  
  
  
  
  
  <script type="text/javascript"> 



  
  	 function Gift(giftname, giftdest, giftbudget_min, giftbudget_max){
 	      this.name = giftname;
 	      this.dest = giftdest;
 	      this.budget_min = giftbudget_min;
 	      this.budget_max = giftbudget_max; 
 	      this.products = null; 
 	  }

    
    // recupero l'oggetto dato la key 'gift'  
  	function getFromSession() {
		  return JSON.parse(sessionStorage.getItem('gift')); 
  	  	 }

  	 
  	function print() {
		var g = getFromSession();
		var s = 'Nome: ' + g.name + ' Destinatario: ' + g.dest + ' min: ' + g.budget_min + ' max: ' + g.budget_max; 
		alert(s);
		alert(g.products);
		  }

    
    function updateProductsArray(products) {
      var gift = getFromSession();
      gift.products = products;
      sessionStorage.setItem('gift', JSON.stringify(gift) );
      //print();
      
    }
    


  	
  	 function updateInSession() {
  		var gift = getFromSession();
  		gift.budget_min = $('#budget_min').val();
		  gift.budget_max = $('#budget_max').val();

		  //print();

  	  	
		  sessionStorage.setItem('gift', JSON.stringify(gift) );

		   //print();
  	  	 }

  	
  	 
 	  function get_giftname() {
 	 	var gift = getFromSession();
 		return gift.name;
 		  } 

	  function get_giftdest() {
		 var gift = getFromSession();
		 return gift.dest;
		  }

	  function get_giftbudgetmin() {
			 var gift = getFromSession();
			 return gift.budget_min;
			  }

	  function get_giftbudgetmax() {
			 var gift = getFromSession();
			 //alert(gift.budget_max);
			 return gift.budget_max;
			  }  


	

  
  $(document).ready(function(){ 
	  var div = '<div><h4>' + 'Regalo per ' + get_giftname() + '<h4></div>';    
	  $('div#show').html(div);	

	  $('#budget_min').val(get_giftbudgetmin());
	  $('#budget_max').val(get_giftbudgetmax()); 
	  $('#budget_range').rangeslider( "refresh" );  // refresh effetto grafico




	  /*
	  * Quando il panel viene chiuso devo salvare le modifiche.
	  * In alternativa posso aggiungere nel panel un button SAVE e
	  * agganciare l'evento di salvataggio.
	  */
	  $( "#optpanel" ).on( "panelclose", function( event, ui ) {
      //$('#thelist').empty();
			updateInSession();			
			
			//$('#gifts_in_shake').css('visibility', 'visible');
			//$('#gifts_in_shake').html('5');

	 	} );
	 	
	 


	  // $('#container').BlocksIt({
   	      // numOfCol: 2,
   	      // offsetX: 8,
   	      // offsetY: 8
   	    // });

   	 
   	 
   	   
	 	// $("#page_giftlist div[data-role=content]").iscrollview("refresh");
	 	

/*
		$("a").live("click", function (event) {
		      //alert();
		      var parm = $(this).attr("data-parm");
		      //do something here with parameter on page 2 (or any page in the dom)
		      $("#showParmHere").html(parm);
		    });
*/		    
		    
		
		$("#page_list_categories a").live("click", function (event) {
		      
		      var param = $(this).attr("data-parm");      
		      $("#page_list_item div[data-role=header] h1").html(param);

		      
		      
		      // with param I can get data via ajax
		      
		      $.ajax({ url: "get_list_item.php",
		        type: 'POST',
		        data: "item_type=" + param,
		        success: function(data) {          
		          //alert(data);
		           $("#page_list_item div[data-role=content] ul").html(data);

		           $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
		           
		        	$("#page_list_item div[data-role=content]").iscrollview("refresh");


		           
		          // $("#page_list_item div[data-role=content] div#container").html(data);
		           //  $("#page_list_item div[data-role=content] ul" ).listview("refresh");          
		          //$("#page_list_item div#scroller ul").html(data);
		          //$("#page_list_item div#scroller ul").listview();
		          
		                    
		            }
		        }); // end ajax            
		        
		        
		      });


  
  /* chiamata ajax per costruire la scheda prodotto con le info specifiche di un prodotto */
        
        
     $("#page_list_item div[data-role=content] a").live("click", function (event) {
          //alert();
          
          var param = $(this).attr("data-parm");      
          //$("#page_list_item div[data-role=header] h1").html(param);

          
          
          // with param I can get data via ajax
          
          
          $.ajax({ url: "script_build_scheda_prodotto.php",
            type: 'POST',
            data: "product_code=" + param,
            success: function(data) {          
              //alert(data);
              
              
              /* devo aspettare di caricare il contenuto via ajax e poi mostrare la pagina con il
               * contenuto, altrimenti si vede il vecchio prodotto in attesa del tempo di latenza
               * dal server. 2 possibilità:
               * 1- usare il gif loader che carica in attesa del contenuto (usata)
               * 2- i tag <a href="#" senza specificare l id della quarta pagina ed utilizzo
               * il metodo changePage dopo il success della chiamata ajax.  
               * */
              
              //$.mobile.changePage( "#scheda_prodotto", { transition: "slideup"} );
              
              
              $("#scheda_prodotto div[data-role=content] ul").html(data).trigger('create');
               // $("#scheda_prodotto div[data-role=content] ul").html(data);               
              $("#scheda_prodotto div[data-role=content] ul" ).listview("refresh");
               
               // //$("#scheda_prodotto div[data-role=content]").iscrollview("refresh");
               // $('#scheda_prodotto button[type="submit"]').button('refresh');
               
                }
            }); // end ajax            
           
            
          });

  
  var giftsSelected = new Array();
  
  // prendo dalla sessione
  var gift = getFromSession();
  if (gift.products != null) {
    giftsSelected = gift.products;
  }
  
  //if ($.inArray(id, giftsSelected))
  
  $.each( giftsSelected, function( key, value ) {
    //alert( key + ": " + value );
    //alert("a#" + value);
    
    // var str = 'products[riviste][001]';
    // var n = str.match('\\[(.*)\\]');
    // alert(n[1]);
    
    
    escaped_value = value.replace(/(:|\.|\[|\])/g,'\\$1');
    // alert(escaped_value);
    
    $("a#" + escaped_value).css('color','gray');
  }); 
  
  $("[name=addProduct]").live("click", function (event) {
      
      //alert();
          
      var id = $(this).attr('id');
      
      giftsSelected.push(id);
      
      
      
      // salvo in sessione
      updateProductsArray(giftsSelected);
      
      
      
      // disable Add button
      $(this).css('pointer-events', 'none');
      $(this).css('color', 'gray');
            
      // prendo l'id della pagina sulla quale l'utente si trova
      var activePage = $.mobile.activePage.attr("id");
      
      $('#' + activePage).find('#gifts_in_shake').css('visibility', 'visible');
      $('#' + activePage).find('#gifts_in_shake').html(giftsSelected.length);
      
      
      
            
       });


/*
$("#myPage").live('pageshow', function(event) {
            $.mobile.fixedToolbars.hide(true)
  });
*/


	 
  });  // end document ready

 
  
  </script>
  
  
  <!-- To load Iscroll  -->
  
  <!-- <script type="text/javascript">
    
    var popular_scroll;
    var consigliati_scroll;
    function loaded() {
      popular_scroll = new iScroll('most_popular');
      //consigliati_scroll = new iScroll('consigliati');
    }
    
    // if set, block vertical scroll of the page
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    
    //document.addEventListener('DOMContentLoaded', loaded, false);
    
  </script> -->
  
  
  
  
  <style type="text/css">
  /*  
    .horizontalWrapper {
      height: 155px;
      
    }
   */ 
    /*.scroller li {
      font-size: 10px;
    }*/
    
  </style>
  
 </head>
 
 <body>
   
   
   
    
  <script type="text/javascript">
    
    $('#page_giftlist').live('pageshow', function() {
      
     
      
      });
    
  </script>
   
   
   
 
 <!-- Start of first page -->

  <div id="page_giftlist" class="pull-demo-page" data-role="page" data-theme="f">
    
    
    <script>
    
    
    $( "#page_giftlist" ).live( "pageshow", function( event ) {
      
      $.ajax({ url: "script_get_best_products.php",
          type: 'POST',
          data: '', //'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
          //async: false,
          success: function(data) {
           
             $("#page_giftlist div[data-role=content] div#container").html(data);
            // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 


             $('#container').BlocksIt({
                numOfCol: 2,
                offsetX: 8,
                offsetY: 8
              });
             $("#page_giftlist div[data-role=content]").iscrollview("refresh");             
           }
          }); // end ajax
          
          
          
      // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
      var gift = getFromSession();
      if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $('#page_giftlist #gifts_in_shake').css('visibility', 'visible');
            $('#page_giftlist #gifts_in_shake').html(productsSelected.length);
          }
      }
      
       }); 
    
   
    </script>
    
  <!--   
  <div data-role="panel" id="optpanel" data-display="overlay" data-theme="c">        
  <a style="float:right" href="#my-header" data-rel="close" data-role="button" data-iconpos="notext" data-icon="delete" class="ui-btn-right"></a>
  <h4>Opzioni</h4>    
  <div id="show"> </div> <br/>
  	<label>Budget
       <div id="budget_range" data-role="rangeslider" data-mini="true" data-track-theme="c" data-theme="b">
	        <label class="ui-hidden-accessible" for="range-3a">Rangeslider:</label>
	        <input type="range" name="budget_min" id="budget_min" min="0" max="400" value="">
	        <label for="range-3b">Rangeslider:</label>
        	<input type="range" name="budget_max" id="budget_max" min="0" max="400" value="">
        </div>
     </label>   
    <br/>
    <h3>Suggerimenti</h3> <br/>
    
    <form>
	    <fieldset data-mini="true" data-role="controlgroup">
	        <legend>Vertical:</legend>
	        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
	        <label for="checkbox-v-2a">One</label>
	        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
	        <label for="checkbox-v-2b">Two</label>
	        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
	        <label for="checkbox-v-2c">Three</label>
	    </fieldset>
	</form>
    
  </div> -->   
  
  <div data-role="panel" id="optpanel" data-theme="f">        
  
   <ul data-role="listview" data-inset="false" data-filter="true" data-divider-theme="b">
    <li data-role="list-divider"></li>
    <li><a href="#">Profilo</a></li>
    <li data-role="list-divider">Attività</li>
    <li><a href="#">Inviti</a></li>
    <li><a href="#">In corso</a></li>
    <li><a href="#">Da inviare</a></li>
    <li><a href="#">Inviati</a></li>
    <li data-role="list-divider"></li>
    <li><a href="#">Impostazioni</a></li>
    <li><a href="#">Logout</a></li>
  </ul>
    <!--
    <form>
      <fieldset data-mini="true" data-role="controlgroup">
          <legend>Vertical:</legend>
          <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
          <label for="checkbox-v-2a">One</label>
          <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
          <label for="checkbox-v-2b">Two</label>
          <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
          <label for="checkbox-v-2c">Three</label>
      </fieldset>
  </form>
    -->
  </div>
  
  
  
   <!-- /panel -->

  
    <div id="my-header" data-role="header" data-position="fixed" data-theme="f">
    	<a href="#optpanel" class="ui-btn-left recticon" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="f" data-inline="true">Options</a>
        <h1>Crea il tuo shake</h1>
        <!--  a id="fer" href="#page2" class="ui-btn-right" data-icon="arrow-r">Next</a style="font-size: 14px; color:#366097"-->
        <a href="#page_list_categories" class="rectbutton">Categorie</a>
    </div><!-- /header -->

  <div data-role="content" data-iscroll>
   
       
    <!-- <ul class="ui-icon-alt" style="padding-bottom: 15px" data-role="listview">
      <li><a style="font-size: 14px; color:#366097" href="#page_list_categories">Scegli per categoria</a></li>
    </ul>  -->
  
  <!-- add for ajax call -->
     <!-- <div style="padding-top: 5px; padding-bottom: 5px; font-size: 15px; color:#366097 ">I più scelti </div> -->  
   
<!--    <div class="wrapper" id="most_popular"> -->
<!--      <div class="scroller"> -->
    	<!--  content load via ajax --> 
<!--     </div>  -->
<!--    </div>  -->
   
  
  <!-- use scroll with dynamic grid data-iscroll="" -->
  <div id="container"  class="ui-grid-solo" >
  
  </div>  
  
  <div class="iscroll-pullup">
      <span class="iscroll-pull-icon"></span>
      <span class="iscroll-pull-label" data-iscroll-loading-text="Custom loading text" data-iscroll-pulled-text="Custom pulled text">Custom reset text</span>
  </div>
  
  
  </div>  <!-- content -->
  

	 
      
      <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c>
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="/index.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->	


  </div> <!-- end page -->
  

  
 <!-- 
 			=============================================
 						Seconda Pagina: Categorie
 			=============================================			
  -->
  
  
   <script type="text/javascript">

		var scrollCateg;
		function loadedCat() {
			scrollCateg = new iScroll('wrapper_categ');
		}
		
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		
		document.addEventListener('DOMContentLoaded', loadedCat, false);

		$('#page_list_categories').live('pageshow', function() {
		  
		  // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
		  var gift = getFromSession();
      if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $('#page_list_categories #gifts_in_shake').css('visibility', 'visible');
            $('#page_list_categories #gifts_in_shake').html(productsSelected.length);
          }
      }
		  
		  
			setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!
		    scrollCateg.refresh();   // Remember to refresh when contents are loaded (ie: on ajax completion)
			  }, 0); // <-- Simulate network congestion, remove setTimeout from production!
			});
	
	</script>
  
<style type="text/css" media="all">

.wrapperv {
	position:absolute; 
	z-index:1;
	top:40px; 
	bottom:48px; 
	left:0;
	width:100%;
	background:#aaa;
	overflow:auto;
	

}

.scrollerv {
	position:absolute; 
	z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
/* 	padding:0; */
}

.scrollerv ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

.scrollerv li {
	/*padding:0 10px;*/
	/*height:40px;
	line-height:40px;*/
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	/*font-size:14px;*/
} 

  
  </style>
  
  
  

    <div data-role="page" id="page_list_categories" data-theme="f">
      
    <script>
       $( "#page_list_categories" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#page_list_categories a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
      
    <div data-role="header" data-position="fixed" data-theme="f">
      <!-- quando clicco su back forzo il reload della pagina cosi che venga 
        ricaricato tutto il javascript necessario per gli iscroll.
        In alternativa posso gestire tutte le pagine in file html/php esterni
        senza utilizzare ajax. Nelle chiamate userò rel="external".
        Adesso funziona anche senza ricaricare tutta la pagina e il js
        perchè allo show della terza pag faccio il refresh di iscroll.
        -->
       <!-- <a href="#" class="backbutton" onclick="window.location.href = &quot;page.gift_list.php&quot;">Back</a> -->
       <a href="#page_giftlist" class="backbutton" >Back</a>
      <!-- <a href="#page_giftlist" data-rel="back"  data-icon="arrow-l" >Back</a> -->
      
      <h1>Categorie</h1>
    </div>
    <div class="wrapperv" id="wrapper_categ" data-theme="f"> <!-- data-role="content" -->
			<div class="scrollerv">
			  <ul id="categList" data-role="listview" class="ui-icon-alt">
	        <li><a href="#page_list_item" data-parm="riviste">Riviste</a></li> <!-- or via call external and not ajax -->
	        <!-- <li><a href="get_new_list_url.php?param=riviste" rel="external" data-parm="riviste">Riviste</a></li> -->
	        <li><a href="#">Libri</a></li>
	        <li><a href="#">Elettronica</a></li>
	        <li><a href="#">Informatica</a></li>
	        <li><a href="#">Profumeria</a></li>
	        <li><a href="#">Gioielli</a></li>
	        <li><a href="#">Vestiario</a></li>
	        <li><a href="#">Accessori</a></li>        
	        <li><a href="#">Aperitivi</a></li>
	        <li><a href="#">Viaggi</a></li>
	      	<li><a href="#">Libri</a></li>
	        <li><a href="#">Elettronica</a></li>
	        <li><a href="#">Informatica</a></li>
	        <li><a href="#">Profumeria</a></li>
	        <li><a href="#">Gioielli</a></li>
	        <li><a href="#">Vestiario</a></li>
	        <li><a href="#">Accessori</a></li>        
	        <li><a href="#">Aperitivi</a></li>
	        <li><a href="#">Viaggi</a></li>
	      </ul>
	    </div>
	   </div>
    
    <div id="footer" data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c>
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="index.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->  
  </div>
  
  
  
  <style>
    #page_list_item div[data-role="content"] ul li { height: 100px; }
    /*#page_list_item div#scroller ul li { height: 100px; }*/
    #page_list_item img { padding: 5px;   }
  
  </style>
  

  
  
  
  
<script type="text/javascript">


/* Works */
$('#page_list_item').live('pageshow', function() {
  
  //alert();
  
  // carico dalla sessione
  var gift = getFromSession();
  if (gift.products != null) {
    var productsSelected = gift.products;
    if (productsSelected.length > 0) {
        $('#page_list_item #gifts_in_shake').css('visibility', 'visible');
        $('#page_list_item #gifts_in_shake').html(productsSelected.length);
      }
  }

/*	$('#container').BlocksIt({
		numOfCol: 2,
		offsetX: 8,
		offsetY: 8
	});
*/	

$("#page_list_item div[data-role=content]").iscrollview("refresh");
	
	});


  </script>





<script>
  
  


//-------------------------------------------------------
// Pull-Up and Pull-Down callbacks for "Pull" page
//-------------------------------------------------------
(function pullPagePullImplementation($) {
  "use strict";


  $.ajax({ url: "script_get_best_products.php",
      type: 'POST',
      async: false,
      data: 'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
     // async: false,
      
      success: function(data) {
        // get content and put inside the div container
         $("#page_giftlist div#container").html(data);

     /*	
         $('#container').BlocksIt({
     	      numOfCol: 2,
     	      offsetX: 8,
     	      offsetY: 8
     	    });
     */  
     //    $("#page_giftlist div[data-role=content]").iscrollview("refresh");
         
          }
  });


  
  var pullDownGeneratedCount = 0,
      pullUpGeneratedCount = 0,
      listSelector2 = "# ul.ui-listview",
      lastItemSelector2 = listSelector2 + " > li:last-child",
      listSelector = "div.pull-demo-page div#container",
      lastItemSelector = listSelector + " > div:last-child";
    
  /* For this example, I prepend three rows to the list with the pull-down, and append
   * 3 rows to the list with the pull-up. This is only to make a clear illustration that the
   * action has been performed. A pull-down or pull-up might prepend, append, replace or modify
   * the list in some other way, modify some other page content, or may not change the page 
   * at all. It just performs whatever action you'd like to perform when the gesture has been 
   * completed by the user.
   */
  
  
  function gotPullUpData(event, data) {
	  $.ajax({ url: "script_get_best_products.php",
	        type: 'POST',
	        data: 'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
	        //async: false,
	        success: function(data) {
	         
             $("#page_giftlist div[data-role=content] div#container").append(data);
            // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 


             $('#container').BlocksIt({
                numOfCol: 2,
                offsetX: 8,
                offsetY: 8
              });
             $("#page_giftlist div[data-role=content]").iscrollview("refresh");             
           }
          }); // end ajax

	  
    
    var i,
        iscrollview = data.iscrollview,
        newContent = "";
    
  
    // The refresh is a bit different for the pull-up, because I want to demonstrate the use
    // of refresh() callbacks. The refresh() function has optional pre and post-refresh callbacks.
    // Here, I use a post-refresh callback to do a timed scroll to the bottom of the list
    // after the new elements are added. The scroller will smoothly scroll to the bottom over
    // a 400mSec period. It's important to use the refresh() callback to insure that the scroll
    // isn't started until the scroller has first been refreshed.
    iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview) { 
        this.scrollToElement(lastItemSelector, 400); 
        }, iscrollview) ); 
    }


  function gotPullUpData2(event, data) {
	  $.ajax({ url: "get_list_item.php",
          type: 'POST',
          data: "item_type=riviste", //+ param,
          success: function(data) {          
            //alert();
             $("#page_list_item div[data-role=content] ul").append(data);
            // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
						
						$("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
            
             $("#page_list_item div[data-role=content]").iscrollview("refresh");             
           }
          }); // end ajax 

	  
    
    var i,
        iscrollview2 = data.iscrollview,
        newContent = "";
    
  
    // The refresh is a bit different for the pull-up, because I want to demonstrate the use
    // of refresh() callbacks. The refresh() function has optional pre and post-refresh callbacks.
    // Here, I use a post-refresh callback to do a timed scroll to the bottom of the list
    // after the new elements are added. The scroller will smoothly scroll to the bottom over
    // a 400mSec period. It's important to use the refresh() callback to insure that the scroll
    // isn't started until the scroller has first been refreshed.
    iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview2) { 
        this.scrollToElement(lastItemSelector2, 400); 
        }, iscrollview2) ); 
    }
  
  
  // This is the callback that is called when the user has completed the pull-down gesture.
  // Your code should initiate retrieving data from a server, local database, etc.
  // Typically, you will call some function like jQuery.ajax() that will make a callback
  // once data has been retrieved.
  //
  // For demo, we just use timeout to simulate the time required to complete the operation.
  function onPullDown (event, data) { 
    setTimeout(function fakeRetrieveDataTimeout() {
      gotPullDownData(event, data);
      }, 
      1500); 
    }    

  // Called when the user completes the pull-up gesture.
  function onPullUp (event, data) { 
    
    
    setTimeout(function fakeRetrieveDataTimeout() {
      gotPullUpData(event, data);
      }, 
      1500); 
    }  


  function onPullUp2 (event, data) { 
	    
	    
	    setTimeout(function fakeRetrieveDataTimeout() {
	      gotPullUpData2(event, data);
	      }, 
	      1500); 
	    }    
  
  // Set-up jQuery event callbacks
  $(document).delegate("div.pull-demo-page", "pageinit", 
    function bindPullPagePullCallbacks(event) {
      $(".iscroll-wrapper", this).bind( {
      iscroll_onpulldown : onPullDown,
      iscroll_onpullup   : onPullUp
      } );
    } );


  $(document).delegate("#page_list_item", "pageinit", 
		    function bindPullPagePullCallbacks(event) {
		      $(".iscroll-wrapper", this).bind( {
		      iscroll_onpullup   : onPullUp2
		      } );
		    } );  

  }(jQuery));


 </script>




	<!-- 
 			=============================================
 						Terza Pagina: Categoria specifica
 			=============================================			
  -->



    <div data-role="page"  id="page_list_item" data-theme="f">
      
      <script>
       $( "#page_list_item" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#page_list_item a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
      
    <div data-role="header" data-theme="f">
      <a data-rel="back" class="backbutton">Categorie</a>
      <h1></h1>
      <a href="#" class="rectbutton">Affinare</a>
    </div>
    <div data-role="content" data-iscroll="">
      <!-- content via ajax -->
     
    <ul data-role="listview">

</ul> 

  <div class="iscroll-pullup">
      <span class="iscroll-pull-icon"></span>
      <span class="iscroll-pull-label" data-iscroll-loading-text="Custom loading text" data-iscroll-pulled-text="Custom pulled text">Custom reset text</span>
  </div>
</div>
      
      
    <!-- </div> -->
    <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c>
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="index.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->   
  </div>
  
  
  
  <!-- 
      =============================================
            Quarta Pagina: Scheda prodotto
      =============================================     
  -->
  
  
  <script type="text/javascript">
    $('#scheda_prodotto').live('pageshow', function() {
      
      // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
      var gift = getFromSession();
      if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $('#scheda_prodotto #gifts_in_shake').css('visibility', 'visible');
            $('#scheda_prodotto #gifts_in_shake').html(productsSelected.length);
          }
      }
      
      });
    
  </script>
  
  
   <div data-role="page"  id="scheda_prodotto" data-theme="f">
     
     <script>
       $( "#scheda_prodotto" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#scheda_prodotto a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
     
    <div data-role="header" data-theme="f">
      <a data-rel="back" class="backbutton">Altro</a>
      <h1>Dettagli</h1>
      <!-- <a href="#">Affinare</a> -->
    </div>
    <div data-role="content" data-iscroll="">
      <!-- content via ajax -->     
    <ul data-role="listview">
    <li class="ui-body ui-body-b">
            <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </fieldset>
        </li>  
    </ul>
   
 
  </div>  <!-- end content -->
      
     
    <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c>
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="index.php" rel="external" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
            </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->   
  </div>
  

  <script>

    $(document).on( "click", ".show-page-loading-msg", function() {
      var $this = $( this ),
        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
        textonly = !!$this.jqmData( "textonly" );
        html = $this.jqmData( "html" ) || "";
      $.mobile.loading( 'show', {
          text: msgText,
          textVisible: textVisible,
          theme: theme,
          textonly: textonly,
          html: html
      });
    })
    .on( "click", ".hide-page-loading-msg", function() {
      $.mobile.loading( "hide" );
    });
  </script>

  
 </body>  
</html>